<template>
  <el-container>
    <el-header>
      <div>
        <div style="display: inline-block">
          <el-button icon="el-icon-back" size="small" style="font-family: Microsoft YaHei" type="text"
                     @click="goBack">返回
          </el-button>
        </div>
        <div style="display: inline-block">|</div>
        <div style="display: inline-block;">
          <div style="padding-bottom: 15px;margin-left:10px">
            <span style="font-family: Microsoft YaHei;display: inline-block; font-size: 14px;">详情</span>
          </div>
        </div>
        <div style="border-bottom: solid 1px #C9C9C9;"></div>
      </div>
    </el-header>
    <el-container>
      <div width="25%" height="500px" style="margin-top: 10px">
        <el-aside>
          <div style="width: 280px; float:left;margin-left: 20px">
            <el-input @keyup.enter.native="searchConfirm" placeholder="请输入目录搜索" v-model="name">
              <i class="el-input__icon el-icon-search" slot="prefix"></i>
            </el-input>
          </div>
          <div style="margin-top: 60px; margin-left:20px; height: 450px; width:280px; overflow: auto">
            <el-tree ref="catalogTree"
                     :data=treeData
                     :props="defaultProps"
                     :default-expanded-keys="treeKey"
                     :curren-node-key="treeKey"
                     highlight-current="true"
                     node-key="id"
                     @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{node, data}">
              <span v-html="node.label"></span>
              <span style="color: red" v-show="data.filtered">*</span>
            </span>
            </el-tree>
          </div>
        </el-aside>
      </div>
      <el-container>
        <el-main
          :style="{backgroundColor : contenteditable ? 'aliceblue' : 'antiquewhite', height: contextHeight + 'px'}"
          style="margin: 10px 20px; ">
          <div :contenteditable="contenteditable" id="context" v-html="bookArticle.unitContent"/>
        </el-main>
        <el-footer style="text-align: right; height: 30px; ">
          <el-button style="margin-left: 10px; " size="small" type="primary" @click="getPreSibling">上一篇</el-button>
          <el-button size="small" type="primary" @click="getNextSibling">下一篇</el-button>
          <el-button v-if="!contenteditable && this.$route.query.showEdit==='draft'" size="small" type="warning"
                     @click="editContext">编辑
          </el-button>
          <el-button type="success" size="small" v-if="contenteditable" @click="confirm">保存</el-button>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "detail",
  data() {
    return {
      name: '',
      treeData: [],
      id: '',
      bookArticle: {},
      defaultProps: {
        children: 'children',
        label: 'str'
      },
      contextHeight: 0,
      contenteditable: false,
      treeKey: [],
      crtCatalogItem: [],
      bookCatalogItemId: "",
    }
  },
  methods: {
    editContext() {
      this.contenteditable = true
    },
    switchUnitContent(treeNode) {
      this.contenteditable = false
      this.axios.get("/pmph/action/book/selectBookArticle", {
        params: {
          bookArticleId: treeNode.bookArticleId
        }
      }).then((response) => {
        this.bookArticle = response.data;
        if (this.bookCatalogItemId) {
          this.handleNodeClick(this.crtCatalogItem)
        }
      })
    },
    handleNodeClick: function (treeNode) {
      this.crtCatalogItem = treeNode
      let idName = '#CHP' + treeNode.sequenceNumber;
      var element = document.querySelector(idName);
      if (element) {
        element.scrollIntoView(true);
        return;
      }
      if (this.contenteditable && this.bookArticle.unitContent !== $("#context").html()) {
        this.$confirm('本次编辑尚未保存, 确认放弃吗？', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '放弃',
          type: 'warning'
        }).then(() => {
          this.switchUnitContent(treeNode)
        })
      } else {
        this.switchUnitContent(treeNode)
      }
    },
    searchConfirm() {
      // 先关闭所有展开节点
      for (let nodeId in this.$refs.catalogTree.store.nodesMap) {
        let treeNode = this.$refs.catalogTree.store.nodesMap[nodeId]
        this.$set(treeNode.data, 'filtered', false)
        treeNode.expanded = false
      }
      // 如果有关键字, 递归展开搜索到的节点
      if (this.name) {
        for (let cntNodeId in this.$refs.catalogTree.store.nodesMap) {
          let cntTreeNode = this.$refs.catalogTree.store.nodesMap[cntNodeId]
          if (cntTreeNode.label.includes(this.name)) {
            this.$set(cntTreeNode.data, 'filtered', true)
            this.recursiveExpandParentNode(cntTreeNode)
          }
        }
      }
    },
    recursiveExpandParentNode(treeNode) {
      if (treeNode.parent) {
        treeNode = treeNode.parent
        treeNode.expanded = true
        this.recursiveExpandParentNode(treeNode)
      }
    },
    goBack: function () {
      this.$router.go(-1)
    },

    confirm: function () {
      this.bookArticle.unitContent = $("#context").html()
      let param = new URLSearchParams()
      param.append("bookArticleId", this.bookArticle.id)
      param.append("unitContent", this.bookArticle.unitContent)
      this.axios.post('/pmph/action/book/editConfirm', param)
        .then(() => {
          this.contenteditable = false
        })
    },
    getPreSibling() {
      this.axios.get('/pmph/action/book/selectPreSibling', {
        params: {
          bookId: this.bookArticle.bookId,
          bookArticleId: this.bookArticle.id
        }
      }).then((resp) => {
        this.bookArticle = resp.data;
      })
    },
    getNextSibling() {
      this.axios.get('/pmph/action/book/selectNextSibling', {
        params: {
          bookId: this.bookArticle.bookId,
          bookArticleId: this.bookArticle.id
        }
      }).then((resp) => {
        this.bookArticle = resp.data;
      })
    },
  },
  created: function () {
    this.bookCatalogItemId = this.$route.query.bookCatalogItemId
    this.contextHeight = CONST.WORKSPACE_HEIGHT - 130
    this.axios.get("/pmph/action/book/selectBookTree", {
      params: {
        bookId: this.$route.query.id
      }
    }).then((response) => {
      this.treeData = response.data
      if (this.$route.query.bookCatalogItemId) {
        this.axios.get('/pmph/action/examBook/selectBookCatalogItemById', {
          params: {
            id: this.$route.query.bookCatalogItemId
          }
        }).then((response) => {
          this.crtCatalogItem = response.data
          this.$nextTick(() => this.switchUnitContent(this.crtCatalogItem), this.$refs.catalogTree.setCurrentKey(this.$route.query.bookCatalogItemId)
          )
        })
        this.treeKey.push(this.$route.query.bookCatalogItemId)
      } else {
        this.switchUnitContent(this.treeData[0])
      }
    })
  },

}
</script>

<style scoped>
.el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: hidden;
  noresize: "false";

}
</style>
